<template>
	<view id="goods-select">
		<!-- 我购买的/商品库 -->
		<view class="tab-bar">
			<view class="bought" @click="setActive('1')">
				<view class="text" :class="{'active':isActive == '1'}">我购买的</view>
				<view class="underline" :class="{'active':isActive == '1'}"></view>
			</view>
			<view class="goods-library" @click="setActive('2')">
				<view class="text" :class="{'active':isActive == '2'}">商品库</view>
				<view class="underline" :class="{'active':isActive == '2'}"></view>
			</view>
		</view>
		<!-- 搜索栏 -->
	<!-- 	<view class="search-bar">
			<view class="search">
				<view class="search-ico">
					<image lazy-load="true"  src="../../static/images/search-ico.png" class="search-ico"></image>
				</view>
				<view class="search-input">
					<input type="text" class="search-input" placeholder="沙发" v-model="inputVal">
					</view>
				<view class="close-btn" @click="cleanInput()">
					<image lazy-load="true"  src="../../static/images/close-btn.png" class="close-btn"></image>
				</view>
			</view>
		</view> -->
		<view class="goods-library-list" v-if="isActive == '1'">
				<view class="no-msg-box" v-if="goods_list.length<1">
					<image lazy-load="true"  src="../../static/images/nomsg.png" mode="widthFix" class="no-msg"></image>
				</view>
				<view class="goods" v-for="(item,key) in goods_list" :key="key" @click="checkStatus(item.id)">
					<view class="goods-img">
						<image lazy-load="true"  :src="item.thumbnail" class="goods-img"></image>
					</view>
					<view class="goods-info">
						<view class="goods-title">{{item.name}}</view>
						<view class="goods-price">
							<view class="ico">￥</view><view class="price">{{item.real_price}}</view>
						</view>
					</view>
					<!-- 勾勾 -->
					<view class="check">
						<view class="ok">
							<image lazy-load="true"  src="../../static/images/check-2.png" class="ok" v-if="item.checked == 0"></image>
							<image lazy-load="true"  src="../../static/images/check-1.png" class="ok" v-if="item.checked == 1"></image>
						</view>					
					</view>
				</view>
			<!-- 列表 -->
		</view>
		<!-- 商品库列表 -->
		<view class="goods-library-list" v-if="isActive == '2'">
			<view class="no-msg-box" v-if="all_goods_list.length<1">
				<image lazy-load="true"  src="../../static/images/nomsg.png" mode="widthFix" class="no-msg"></image>
			</view>
				<view class="goods" v-for="(item,key) in all_goods_list" :key="key" @click="checkStatus_all(item.id)">
					<view class="goods-img">
						<image lazy-load="true"  :src="item.thumbnail" class="goods-img"></image>
					</view>
					<view class="goods-info">
						<view class="goods-title">{{item.name}}</view>
						<view class="goods-price">
							<view class="ico">￥</view><view class="price">{{item.real_price}}</view>
						</view>
					</view>
					<!-- 勾勾 -->
					<view class="check">
						<view class="ok">
							<image lazy-load="true"  src="../../static/images/check-2.png" class="ok" v-if="item.checked == 0"></image>
							<image lazy-load="true"  src="../../static/images/check-1.png" class="ok" v-if="item.checked == 1"></image>
						</view>					
					</view>
				</view>
			<!-- 列表 -->
		</view>
		<!-- 提交 -->
		<view class="submit-btn">
			<button class="submit-btn" @click="goBack()">
				<view class="confirm">确定</view>
				<view class="num">({{select_num}}/15)</view>
			</button>
		</view>
		<view class="empty"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputVal:"",
				isActive:"1",
				checked:0,
				brandName:'',
				brand_list:[],
				"list":[],
				category_id:'',
				search_name:'',
				brand:[],
				store_id:0,
				p:1,
				all_p:1,
				per:20,
				sort_g:"sell_count DESC",
				goods_list:[],
				all_goods_list:[],
				is_bottom:false,
				select_num:0,
				select_goods:[]
			}
		},
		onLoad() {
			var self = this;
			this.get_all_good_list();
			this.get_good_list();
			// #ifdef H5
			let share_time_line={
				title:self.$request.h5_share_name, // 分享标题
				link: self.$request.h5_share_url+'?page=index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			let share_app_message={
				title: self.$request.h5_share_name, // 分享标题
				desc: '我发现了一个很不错的商城，买家具有超大实惠！', // 分享描述
				link: self.$request.h5_share_url+'?page=index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			uni.setStorageSync('share_time_line',share_time_line);
			uni.setStorageSync('share_app_message',share_app_message);
			self.$request.wx_config()
			// #endif
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {
		      console.log(res.target)
		    }
		    return {
		      title: this.$request.share_title,
		      path: '/pages/index/index'
		    }
		  },
		methods: {
			cleanInput(){
				this.inputVal = ''
			},
			onReachBottom(){
				if(this.isActive=='1'){
					if(this.is_bottom) return;
					this.is_bottom = true;
					this.p++;
					this.get_good_list();
				}	
				if(this.isActive=='2'){
					if(this.is_bottom) return;
					this.is_bottom = true;
					this.all_p++;
					this.get_all_good_list();
				}
			},
			setActive(num){
				this.isActive = num;
				this.is_bottom = false;
			},
			checkStatus(id){
				var self = this;
				if(self.select_goods.length>14) return;
				for(var i=0;i<self.goods_list.length;i++){
					if(self.goods_list[i].id == id){
						if(self.goods_list[i].checked==1){
							self.goods_list[i].checked = 0;
							self.select_num --;
							var list_index = self.select_goods.indexOf(self.goods_list[i]);
							self.select_goods.splice(list_index,1);
						}else
						if(self.goods_list[i].checked==0){
							self.goods_list[i].checked = 1;
							self.select_num ++;
							self.select_goods.push(self.goods_list[i])
						}
					}
				}
			},
			checkStatus_all(id){
				var self = this;
				if(self.select_goods.length>14) return;
				for(var i=0;i<self.all_goods_list.length;i++){
					if(self.all_goods_list[i].id == id){
						if(self.all_goods_list[i].checked==1){
							self.all_goods_list[i].checked = 0;
							self.select_num --;
							var list_index = self.select_goods.indexOf(self.all_goods_list[i]);
							self.select_goods.splice(list_index,1);
						}else
						if(self.all_goods_list[i].checked==0){
							self.all_goods_list[i].checked = 1;
							self.select_num ++;
							self.select_goods.push(self.all_goods_list[i])
						}
					}
				}
			},
			get_all_good_list(){
				var self = this;
				this.$request.request({
					url:'/goods/list',
					data:{
						category_id:this.category_id,
						name:this.search_name,
						brand:this.brand.join(','),
						store_id:this.store_id,
						p:this.all_p,
						per:this.per,
						sort:this.sort_g
					},
					success:function(res){
						if(res.code==200){
							var x = res.result;
							if(res.result.length<1){
								self.is_bottom = true;
								return false;
							}
							x.forEach((item,index)=>{
								x[index].thumbnail =self.$http_img(item.thumbnail);
								x[index].real_price = self.$money(item.real_price);
								x[index].checked = 0;
							});
							self.all_goods_list =self.all_goods_list.concat(x);							
							self.is_bottom = false;
						}else{
							
						}
					},
					complete:function(){
						uni.hideLoading();
					}
				});
			},
			get_good_list(){
				var self = this;
				this.$request.request({
					url:'/user/order_goods',
					data:{
	
						p:this.p,
						per:this.per

					},
					success:function(res){
						if(res.code==200){
							var x = res.result;
							if(res.result.length<1){
								self.is_bottom = true;
								return false;
							}
							x.forEach((item,index)=>{
								x[index].thumbnail =self.$http_img(item.thumbnail);
								x[index].real_price = self.$money(item.real_price);
								x[index].checked = 0;
							});
							self.goods_list =self.goods_list.concat(x);							
							self.is_bottom = false;
						}else{
							
						}
					},
					complete:function(){
						uni.hideLoading();
					}
				});
			},
			goBack(){
				if(this.select_num>0 && this.select_num<16){
					uni.setStorageSync("good-list",this.select_goods);
					uni.redirectTo({
					    url: '../post/post'
					});
				}
			}
		}
	}
</script>

<style>
	@import url("goods-select.css");
</style>
